
<template>
  <div class="h-full flex flex-col bg-gray-100">
    <!-- 导航栏 -->
    <div class="nav-bar h-12 flex items-center justify-between px-4">
      <div class="flex items-center">
        <button @click="goBack" class="text-white">
          <i class="fas fa-chevron-left text-lg"></i>
        </button>
        <div class="ml-4">
          <h2 class="text-lg font-semibold">{{ currentChat?.name }}</h2>
          <p v-if="isTyping" class="text-xs opacity-80">对方正在输入...</p>
        </div>
      </div>
      <button class="text-white">
        <i class="fas fa-ellipsis-h text-lg"></i>
      </button>
    </div>

    <!-- 消息列表 -->
    <div class="flex-1 overflow-y-auto p-4" ref="messageContainer">
      <div v-for="message in messages" :key="message.id" class="mb-4">
        <div :class="['flex', message.senderId === currentUserId ? 'justify-end' : 'justify-start']">
          <div class="flex items-end max-w-70%">
            <img 
              v-if="message.senderId !== currentUserId"
              :src="currentChat?.avatar" 
              class="w-8 h-8 rounded mr-2"
            >
            <div :class="[
              'message-bubble px-3 py-2 rounded-lg',
              message.senderId === currentUserId ? 'message-bubble-right' : 'message-bubble-left'
            ]">
              <p class="text-sm">{{ message.content }}</p>
              <div class="flex items-center justify-end mt-1">
                <span class="text-xs opacity-60 mr-1">{{ formatTime(message.timestamp) }}</span>
                <i v-if="message.status === 'read'" class="fas fa-check-double text-xs text-blue-500"></i>
                <i v-else-if="message.status === 'delivered'" class="fas fa-check-double text-xs opacity-60"></i>
                <i v-else-if="message.status === 'sent'" class="fas fa-check text-xs opacity-60"></i>
                <i v-else class="fas fa-clock text-xs opacity-60"></i>
              </div>
            </div>
            <img 
              v-if="message.senderId === currentUserId"
              :src="currentUser?.avatar" 
              class="w-8 h-8 rounded ml-2"
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 输入框 -->
    <div class="bg-gray-50 border-t border-gray-200 p-3">
      <div class="flex items-center">
        <button class="text-gray-500 mr-2">
          <i class="fas fa-plus-circle text-xl"></i>
        </button>
        <div class="flex-1">
          <input
            v-model="inputMessage"
            type="text"
            placeholder="输入消息..."
            class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-wechat-green"
            @keyup.enter="sendMessage"
          />
        </div>
        <button 
          @click="sendMessage"
          :disabled="!inputMessage.trim()"
          class="ml-2 px-4 py-2 bg-wechat-green text-white rounded-lg disabled:opacity-50"
        >
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useChatStore, useUserStore } from '@/stores'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()
const chatStore = useChatStore()
const userStore = useUserStore()

const currentUserId = '100'
const currentUser = computed(() => userStore.user)
const currentChat = computed(() => chatStore.currentChat)
const messages = computed(() => chatStore.messages)
const isTyping = computed(() => chatStore.isTyping)

const inputMessage = ref('')
const messageContainer = ref<HTMLElement>()

const goBack = () => {
  router.back()
}

const sendMessage = () => {
  if (!inputMessage.value.trim()) return

  const message = {
    id: Date.now().toString(),
    chatId: route.params.id as string,
    senderId: currentUserId,
    content: inputMessage.value,
    type: 'text' as const,
    timestamp: Date.now(),
    status: 'sent' as const
  }

  chatStore.addMessage(message)
  inputMessage.value = ''

  // 模拟消息状态更新
  setTimeout(() => {
    chatStore.updateMessageStatus(message.id, 'delivered')
  }, 1000)

  setTimeout(() => {
    chatStore.updateMessageStatus(message.id, 'read')
  }, 2000)

  // 模拟对方回复
  setTimeout(() => {
    const replyMessage = {
      id: (Date.now() + 1).toString(),
      chatId: route.params.id as string,
      senderId: '1',
      content: '收到！',
      type: 'text' as const,
      timestamp: Date.now(),
      status: 'read' as const
    }
    chatStore.addMessage(replyMessage)
  }, 3000)

  nextTick(() => {
    scrollToBottom()
  })
}

const scrollToBottom = () => {
  if (messageContainer.value) {
    messageContainer.value.scrollTop = messageContainer.value.scrollHeight
  }
}

const formatTime = (timestamp: number) => {
  return dayjs(timestamp).format('HH:mm')
}

onMounted(() => {
  // 加载初始消息
  if (messages.value.length === 0) {
    const initialMessages = [
      {
        id: '1',
        chatId: route.params.id as string,
        senderId: '1',
        content: '你好！',
        type: 'text' as const,
        timestamp: Date.now() - 3600000,
        status: 'read' as const
      },
      {
        id: '2',
        chatId: route.params.id as string,
        senderId: currentUserId,
        content: '你好，有什么我可以帮你的吗？',
        type: 'text' as const,
        timestamp: Date.now() - 1800000,
        status: 'read' as const
      }
    ]
    initialMessages.forEach(msg => chatStore.addMessage(msg))
  }
  
  nextTick(() => {
    scrollToBottom()
  })
})
</script>
